<template>
<view class="segment flexr" :style="{'borderColor': color}">
	<view
		class="item flex-1 flexr align-center justify-center"
		:style="{
			'color': index != modelValue ? color : '#171719',
			'borderColor': color,
			'backgroundColor': index == modelValue ? color: 'transparent'
		}"
		v-for="(item, index) in segs"
		:key="index"
		@click="emit('update:modelValue', index)"
	>
	  {{item}}
	</view>
</view>
</template>

<script setup>
defineProps({
	modelValue: Number,
	color: String,
	segs: Array,
})
const emit = defineEmits(['update:modelValue'])
</script>

<style lang="scss">
.segment {
	height: 72rpx;
	border-radius: 18rpx;
	border: 2rpx solid #FFEBC0;
	overflow: hidden;
	.item + .item {
		border-left: 2rpx solid white;
	}
}
</style>